<template>
  <view class="fast-index" :style="viewColor">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <!-- 主要内容区域 -->
      <view class="main-content">
        <!-- 左侧位置信息 -->
        <view class="location-info">
          <view class="location-icon">
            <text class="iconfont-v2 icon-dingwei"></text>
          </view>
          <view class="location-text">
            <text class="university">广西大学</text>
            <text class="slogan">岗位真实、履约保障</text>
          </view>
        </view>
      </view>

      <!-- 搜索栏 -->
      <view class="search-bar">
        <view class="search-bar-container">
          <text class="iconfont-v2 icon-sousuo search-icon"></text>
          <input class="search-input" type="text" placeholder="输入您的关键字..." v-model="searchKeyword" @keyup.enter="handleSearch" autocomplete="off" />
          <view class="filter-section" @click="showFilter">
            <text class="iconfont-v2 icon-filter2 filter-icon"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务分类导航 -->
    <view class="service-nav">
      <view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goService(item)">
        <view class="service-icon">
          <text class="iconfont-v2" :class="item.icon" :style="{ color: item.color }">{{ item.emoji }}</text>
        </view>
        <text class="service-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 推荐标签栏 -->
    <view class="recommend-tabs">
      <text class="recommend-title">推荐</text>
      <view class="tabs-scroll">
        <text class="tab-item" v-for="(tab, index) in recommendTabs" :key="index" :class="{ active: currentTab === index }" @click="switchTab(index)">
          {{ tab }}
        </text>
      </view>
    </view>

    <!-- 工作职位列表 -->
    <view class="job-list" v-if="currentTab != 4">
      <JobCard v-for="(job, index) in jobList" :key="index" :job-data="job" apply-button-text="立即报名" @card-click="goJobDetail" @apply-click="applyJob" />
    </view>
    <view class="job-list" v-else>
      <JobTimeCard v-for="(job, index) in jobList" :key="index" :job-data="job" apply-button-text="立即报名" @card-click="goJobDetail" @apply-click="applyJob" />
    </view>

  </view>
</template>

<script>
/**
 * 兼职招聘首页
 * @description 根据设计图实现兼职招聘应用的首页界面
 */
import JobCard from "@/components/JobCard.vue";
import JobTimeCard from "@/components/JobTimeCard.vue";

export default {
  components: {
    JobCard,
    JobTimeCard,
  },
  data() {
    return {
      searchKeyword: "",
      currentTab: 0,
      // 服务分类列表
      serviceList: [
        {
          name: "家教",
          icon: "icon-peixunxuexi",
          emoji: "",
          color: "#E5645E",
          path: "/tutor",
        },
        {
          name: "二手市场",
          icon: "icon-svgmoban06",
          emoji: "",
          color: "#E74C3C",
          path: "/secondhand",
        },
        {
          name: "论文指导",
          icon: "icon-wenbengeshi",
          emoji: "",
          color: "#F39C12",
          path: "/thesis-guidance",
        },
        {
          name: "培训市场",
          icon: "icon-wenben",
          emoji: "",
          color: "#27AE60",
          path: "/training",
        },
      ],
      // 推荐标签
      recommendTabs: ["推荐", "在家做/在校做", "在附近", "标准岗位", "抢班岗位"],
      // 工作职位列表
      jobList: [
        {
          id: 1,
          title: "现金日结天天可做",
          salary: "5000-12000/月",
          tags: ["1-3年", "学历不限", "设计软件", "设计师"],
          company: {
            name: "绍兴飞来科技有限公司",
            location: "就近分配",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
        {
          id: 2,
          title: "兼职客服在线解答",
          salary: "3000-6000/月",
          tags: ["经验不限", "大专", "客服", "在线"],
          company: {
            name: "杭州电商服务有限公司",
            location: "远程办公",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
        {
          id: 3,
          title: "周末兼职配送员",
          salary: "200-300/天",
          tags: ["经验不限", "学历不限", "配送", "周末"],
          company: {
            name: "美团外卖配送站",
            location: "就近分配",
            avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          },
        },
      ],
    };
  },
  computed: {
    viewColor() {
      return {
        backgroundColor: "#F8F9FA",
      };
    },
  },
  methods: {
    /**
     * 处理搜索
     */
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({
          title: "请输入搜索关键词",
          icon: "none",
        });
        return;
      }

      // 使用uni-app进行页面跳转
      uni.navigateTo({
        url: `/pages/fast/search?keyword=${this.searchKeyword}`,
      });
    },
    /**
     * 显示筛选
     */
    showFilter() {
      uni.showToast({
        title: "筛选功能",
        icon: "none",
      });
    },
    /**
     * 显示更多
     */
    showMore() {
      uni.showToast({
        title: "更多功能",
        icon: "none",
      });
    },
    /**
     * 显示目标
     */
    showTarget() {
      uni.showToast({
        title: "目标功能",
        icon: "none",
      });
    },
    /**
     * 跳转到服务页面
     * @param {Object} item 服务项
     */
    goService(item) {
      uni.navigateTo({
        url: item.path,
      });
    },
    /**
     * 切换标签
     * @param {Number} index 标签索引
     */
    switchTab(index) {
      this.currentTab = index;
      // 根据标签加载不同的数据
      this.loadJobList(index);
    },
    /**
     * 根据标签加载工作列表
     * @param {Number} tabIndex 标签索引
     */
    loadJobList(tabIndex) {
      // 这里可以根据不同的标签加载不同的数据
      console.log("切换到标签:", this.recommendTabs[tabIndex]);
    },
    /**
     * 跳转到工作详情
     * @param {Object} job 工作信息
     */
    goJobDetail(job) {
      uni.navigateTo({
        url: `/pages/fast/job-detail?id=${job.id}`,
      });
    },
    /**
     * 申请工作
     * @param {Object} job 工作信息
     */
    applyJob(job) {
      uni.showModal({
        title: "确认申请",
        content: `确定要申请"${job.title}"这个职位吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "申请成功",
              icon: "success",
            });
          }
        },
      });
    },
  },
  onLoad() {
    console.log("兼职招聘首页加载完成");
  },
};
</script>

<style lang="scss" scoped>
.fast-index {
  min-height: 100vh;
  background: #f8f8f8;
  // background-size: 100% 300px;
  // background-repeat: no-repeat;
}
/* 顶部导航栏 */
.header-nav {
  background: linear-gradient(135deg, #e5645e 0%, #c44536 100%);
  padding: 30rpx 30rpx 24rpx;
  min-height: 200rpx;

  .main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .location-info {
      display: flex;
      align-items: center;
      flex: 1;

      .location-icon {
        margin-right: 16rpx;

        .iconfont-v2 {
          font-size: 36rpx;
          color: #fff;
        }
      }

      .location-text {
        display: flex;
        flex-direction: column;
        .university {
          font-size: 28rpx;
          color: #fff;
          font-weight: 500;
          margin-bottom: 4rpx;
        }

        .slogan {
          font-size: 20rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .search-bar {
    transform: translateY(64rpx);
    padding: 0 30rpx;
    position: relative;
    z-index: 10;

    .search-bar-container {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 50rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;
        min-height: 88rpx;

      .search-icon {
        font-size: 48rpx;
        color: #999;
        margin: 0 32rpx;
        flex-shrink: 0;
      }

      .search-input {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        border: none;
        outline: none;
        padding: 0 0;
        background: transparent;
        height: 88rpx;
        line-height: 88rpx;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: auto;

        &::placeholder {
          color: #999;
        }
      }

      /* 删除 uni-input 深度样式，改用原生 input 固定高度 */

      .filter-section {
        background: #f0f0f0;
        border-radius: 0 40rpx 40rpx 0;
        padding: 30rpx 30rpx;
        margin-left: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background-color 0.2s ease;

        &:hover {
          background: #e0e0e0;
        }

        .filter-icon {
          font-size: 36rpx;
          color: #666;
        }
      }
    }
  }
}

/* 服务分类导航 */
.service-nav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 80rpx 30rpx 40rpx;
  gap: 20rpx;

  .service-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    padding: 20rpx 24rpx;
    border-radius: 24rpx;
    border: 2rpx solid #e4e5e7;
    background: #fff;

    .service-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont-v2 {
        font-size: 36rpx;
      }
    }

    .service-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
      font-weight: 500;
      white-space: nowrap;
    }
  }
}

/* 推荐标签栏 */
.recommend-tabs {
  margin: 20rpx 30rpx 40rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;

  .recommend-title {
    font-size: 36rpx;
    margin-right: 20rpx;
    color: #333;
    font-weight: bold;
    flex-shrink: 0;
  }

  .tabs-scroll {
    white-space: nowrap;
    overflow-x: auto;
    flex: 1;

    .tab-item {
      display: inline-block;
      padding: 16rpx 16rpx;
      margin: 0 6rpx;
      font-size: 24rpx;
      color: #666;
      transition: all 0.3s ease;
      cursor: pointer;
      border-radius: 12rpx;
      overflow: hidden;

      &.active {
        color: #333;
        font-weight: 600;
      }

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

/* 工作职位列表 */
.job-list {
  padding: 0 30rpx;
}

/* 底部测试输入框样式已移除 */

/* 动画效果 */
.service-item {
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }
}
</style>
